<!-- 合同列表页面 -->
<template>
  <div class="layout-content contract-list">
    <div class="flex-between">
      <p>
        <c-search-box
          class="search-input"
          v-model="form.searchKey"
          placeholder="请输入合同编号关键字搜索"
          @search="onSearch"
        />
      </p>
      <a-button
        type="primary"
        @click="contractCreat"
        class="create-contract"
        v-if="
          $btn('sellerContractCreate_btn') || $btn('buyerContractCreate_btn')
        "
        >创建合同</a-button
      >
    </div>
    <div class="contract-table-list">
      <c-table
        size="small"
        @cellClick="rowToContractDetail"
        :loading="loading"
        :data="data.pageData"
        :total="data.total"
        :columns="columns"
        @pageChange="pageChange"
        @onReload="reload"
      >
        <div slot="header-l">
          <div>
            <a-space>
              <span>
                商品种类:
                <c-category
                  class="select-input"
                  v-model="form.category"
                  @change="onSearch"
                ></c-category>
              </span>
              <span>
                客户公司:
                <a-select
                  allowClear
                  v-model="form.companyId"
                  placeholder="请选择"
                  class="select-input"
                  @change="onSearch"
                >
                  <a-select-option
                    v-for="item in dealCompanyList"
                    :value="item.id"
                    :key="item.id"
                  >
                    <a-tooltip
                      :title="item.companyName"
                      arrow-point-at-center
                      >{{ item.companyName }}</a-tooltip
                    >
                  </a-select-option>
                </a-select>
              </span>
              <span>
                合同状态:
                <a-select
                  allowClear
                  placeholder="请选择"
                  v-model="form.contractType"
                  class="select-input"
                  @change="onSearch"
                >
                  >
                  <a-select-option
                    v-for="item in contractTypeArr"
                    :value="item.value"
                    :key="item.value"
                    >{{ item.lable }}</a-select-option
                  >
                </a-select>
              </span>
              <span>
                合同日期:
                <a-range-picker
                  class="select-date-picker-input"
                  @change="onRangePickerChange"
                />
              </span>
            </a-space>
          </div>
        </div>
        <template slot="createDate" slot-scope="{ row }">
          <span>{{ $getTime(row.createDate) }}</span>
        </template>
        <template slot="totalPrice" slot-scope="{ row }">
          <span class="danger">¥{{ row.totalPrice }}</span>
        </template>
        <template slot="contractType" slot-scope="{ row }">
          <c-status :flag="row.contractType" :type="'tags'" />
        </template>
        <div slot="handle" slot-scope="{ row }">
          <a-dropdown>
            <a-menu slot="overlay">
              <a-menu-item
                key="1"
                @click="toContractDetail(row)"
                v-if="
                  $verifyBtn('sellerToContractDetails_btn') ||
                    $verifyBtn('buyerToContractDetails_btn')
                "
                >查看合同</a-menu-item
              >
              <c-contract-btn-list
                :btnData="row"
                :identity="identity"
                @initPage="initPage"
                @getWillModalData="getWillModalData"
                @openHandPaintedModal="openHandPaintedModal"
                :type="'menuItem'"
              ></c-contract-btn-list>
            </a-menu>
            <a-button type="primary" size="small" ghost>
              操作
              <a-icon type="down" />
            </a-button>
          </a-dropdown>
        </div>
      </c-table>
    </div>
    <div class="will-modal">
      <!-- 签署 -->
      <c-modal
        :title="curModal == 'will' ? '合同签署' : '手绘签署'"
        v-model="signModalVisable"
        :width="700"
        noFooter
        @cancel="onCancelSignModal"
      >
        <will-modal
          v-if="curModal == 'will'"
          @onCancelWillModal="onCancelSignModal"
          @initPage="initPage"
          :visable="signModalVisable"
          :datas="willModalDatas"
        ></will-modal>
        <hand-painted-content
          v-if="curModal == 'hand'"
          @initPage="initPage"
          @onCancelModal="onCancelSignModal"
          :datas="handPaintedModalDatas"
        ></hand-painted-content>
      </c-modal>
    </div>
  </div>
</template>
<script>
import { getSellerContractList, getBuyerContractList } from "@/api/contract";
import {
  getBuyerCustomerCompanyList,
  getSellerCustomerCompanyList
} from "@/api/contract/associatedOrder";
import cContractBtnList from "../components/contract-button-list";
import cStatus from "@/components-business/contract/status";
import { getCurIdentity } from "@/util/common";
import { contractDetailMethod } from "../common/index";
import willModal from "../components/will-content";
import handPaintedContent from "../components/esign-content";

const columns = [
  {
    title: "合同编号",
    dataIndex: "contractCode"
  },
  {
    title: "商品",
    dataIndex: "categoryName"
  },
  {
    title: "买家",
    dataIndex: "buyerCompanyName"
  },
  {
    title: "卖家",
    dataIndex: "sellerCompanyName"
  },

  {
    title: "数量",
    dataIndex: "amount"
  },
  {
    title: "总价",
    scopedSlots: { customRender: "totalPrice" }
  },

  {
    title: "合同状态",
    scopedSlots: { customRender: "contractType" }
  },
  {
    title: "合同日期",
    scopedSlots: { customRender: "createDate" }
  },
  {
    title: "操作",
    scopedSlots: { customRender: "handle" }
  }
];

export default {
  components: { cStatus, cContractBtnList, willModal, handPaintedContent },
  data() {
    return {
      columns,
      curModal: "will",
      signModalVisable: false,
      // willModalVisable: false,
      // handPaintedModalVisable: false,
      willModalDatas: {},
      handPaintedModalDatas: {},
      //交易公司
      dealCompanyList: [],
      //合同状态
      contractTypeArr: [
        { lable: "双方未签署", value: 1 },
        { lable: "买家未签署", value: 2 },
        { lable: "卖家未签署", value: 3 },
        { lable: "已签署", value: 4 },
        { lable: "已取消", value: 5 }
      ],
      form: {
        category: [], //品种
        dateArr: [], //开始、结束时间
        searchKey: "" //搜索关键字
      },
      data: {}, //页面数据
      pageNum: 1,
      loading: false
    };
  },

  watch: {},
  computed: {
    userInfo() {
      return this.$store.state.user; //用户信息
    },
    identity() {
      return getCurIdentity(); //1买家，2卖家
    }
  },
  created() {
    this.getTradingCompany();
    this.initPage();
  },
  methods: {
    contractDetailMethod,
    //打开手绘签署弹窗
    openHandPaintedModal(type) {
      this.curModal = type;
      this.signModalVisable = true;
    },
    //关闭手绘签署弹窗
    onCancelSignModal() {
      this.signModalVisable = false;
    },
    //获取意愿刷脸数据
    getWillModalData(type, data) {
      this.curModal = type;
      this.willModalDatas = data;
      this.signModalVisable = true;
    },
    //获取交易公司
    getTradingCompany() {
      let requestFun;
      this.identity === 1
        ? (requestFun = getBuyerCustomerCompanyList)
        : (requestFun = getSellerCustomerCompanyList);
      requestFun({}).then(res => {
        this.dealCompanyList = res;
      });
    },
    //关键字搜索
    onSearch() {
      this.initPage();
    },
    // 日期选择
    onRangePickerChange(val, dateString) {
      this.form.dateArr = dateString;
      this.initPage();
    },
    //获取页面数据
    initPage() {
      this.loading = true;
      let that = this;
      let requesFun;
      this.identity === 1
        ? (requesFun = getBuyerContractList)
        : (requesFun = getSellerContractList);
      requesFun({
        startTime: this.form.dateArr[0]
          ? this.$timeToTimestamp(this.form.dateArr[0])
          : "",
        endTime: this.form.dateArr[1]
          ? this.$timeToTimestamp(this.form.dateArr[1])
          : "",
        contractType: Number(this.form.contractType),
        companyId: Number(this.form.companyId),
        contractCode: this.form.searchKey,
        categoryId: Number(this.form.category[1]),
        pageData: {
          pageNum: this.pageNum,
          pageSize: 20
        }
      })
        .then(res => {
          that.loading = false;
          that.data = res;
        })
        .finally(() => {
          that.loading = false;
        });
    },
    //行跳转详情
    rowToContractDetail({ record }) {
      this.contractDetailMethod(this.identity, record.id);
    },
    // 跳转合同详情
    toContractDetail(row) {
      this.contractDetailMethod(this.identity, row.id);
    },
    reload() {
      this.pageNum = 1;
      this.initPage();
    },
    pageChange(pagination) {
      this.pageNum = pagination;
      this.initPage();
    },

    //创建合同
    contractCreat() {
      this.identity === 1
        ? this.$router.push({ name: "buyerContractGenerate" })
        : this.$router.push({ name: "sellerContractGenerate" });
    }
  }
};
</script>
<style lang="scss" scoped>
.contract-list {
  ::v-deep .ant-calendar-range-picker-input,
  ::v-deep .ant-select-selection__placeholder,
  ::v-deep .ant-input,
  ::v-deep .ant-cascader-input {
    font-size: 12px;
  }
  ::v-deep .ant-input {
    border-radius: 4px !important;
  }
  .search-input {
    width: 324px;
  }
  .create-contract {
    margin-bottom: 20px;
  }
  .select-input {
    width: 184px;
    margin-right: 5px;
  }
  .select-date-picker-input {
    width: 220px;
  }
}
</style>
